<template>
    <div class="age">
        <div class="title">
            <p class="">年龄比例</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="echart" ref="echart"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    let option={
        
        grid:{
            top:0,
            right:0,
            left:0,
            bottom:0
        },
        legend: {
            top: '25%',
            right:'0',
            orient :'vertical',
            textStyle:{
                color:'white',
                fontSize:'20'
            }

        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: 'black',
                borderWidth: 2
            },
            
            center:['30%','55%'],
            
            label: {
                show: true,
                position: 'inside',
                color:'white'

            },
            labelLine: {
                show: true
            },
            data: [
                { value: 735, name: '10岁以下' },
                { value: 1048, name: '11岁到18岁' },
                { value: 580, name: '19岁到30岁' },
                { value: 484, name: '31岁到59岁' },
                { value: 300, name: '60岁以上' }
            ]
            }
        ],
        
    }
    myEchart.setOption(option)
})
</script>

<style scoped lang='scss'>
    .age{
        width: 100%;
        flex: 1;
        background:url('../../images//dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        .title{
            margin-left: 10px;
            p{
                color: white;
                font-size: 20px;
            }
            
        }
        .echart{
            height: 260px;
        }
    }
</style>